import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import 'element-plus/dist/index.css';
import router from './router';
import './assets/styles.css'; // 导入自定义样式

const App = {
  template: `
    <el-container style="height: 100vh;">
      <el-header class="header">
        <div class="logo-container">
          <el-icon :size="30"><Platform /></el-icon>
          <span class="title">Translationia</span>
        </div>
        <div class="header-right">
          <el-tooltip content="帮助" placement="bottom" effect="light">
            <el-button type="primary" text circle>
              <el-icon :size="20"><QuestionFilled /></el-icon>
            </el-button>
          </el-tooltip>
          <el-divider direction="vertical" />
          <el-dropdown trigger="click">
            <el-avatar :size="32" icon="UserFilled" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon><User /></el-icon>个人中心
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon><Setting /></el-icon>偏好设置
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-icon><SwitchButton /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activeMenu"
            class="menu"
            @select="handleMenuSelect"
            router
            unique-opened
          >
            <el-menu-item index="1">
              <el-icon><Document /></el-icon>
              <template #title>
                <span>翻译</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><Clock /></el-icon>
              <template #title>
                <span>历史记录</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><Setting /></el-icon>
              <template #title>
                <span>设置</span>
              </template>
            </el-menu-item>
          </el-menu>
          <div class="aside-footer">
            <el-tooltip content="折叠菜单" placement="right">
              <el-button type="primary" text circle>
                <el-icon><Fold /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </el-aside>

        <el-main class="main-content">
          <el-card shadow="hover" class="main-card">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  `,
  data() {
    return {
      activeMenu: '1'
    }
  },
  methods: {
    handleMenuSelect(index: string) {
      this.activeMenu = index;
      const routes = ['translation', 'history', 'settings']
      this.$router.push({ name: routes[Number(index)-1] })
    }
  },
  mounted() {
    // 根据当前路由设置活动菜单项
    const path = this.$router.currentRoute.value.path;
    if (path.includes('translation')) {
      this.activeMenu = '1';
    } else if (path.includes('history')) {
      this.activeMenu = '2';
    } else if (path.includes('settings')) {
      this.activeMenu = '3';
    }
  }
}

const app = createApp(App);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(ElementPlus)
app.use(router)
app.mount('#app')
